{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
    <div class="about_banner">
        <div class="container">
            <h2>Python基础</h2>
            <span class="breadcrumbs"><a href="index.html"><i
                    class="fa fa-home home_1"></i></a> / <span>Python基础</span> / <span>第一关</span></span>

        </div>
    </div>
    <div class="about_top">
        <div class="container">
            <div class="col-md-3 forum">
                <div class="fb-like-button social-item">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa-facebook sc-icon"></span>
                            <span class="like-count">50696</span>
                            <span class="like-text"> Likes </span>
                        </div>
                    </a>
                </div>
                <div class="twitter-like-button  social-item ">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa-twitter sc-icon"></span> <span class="like-count">2</span>
                            <span class="like-text"> Follower </span>
                        </div>
                    </a>
                </div>
                <div class="youtube-subscribers-button  social-item ">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa-youtube sc-icon"></span> <span class="like-count">0</span>
                            <span class="like-text"> Subscriber </span>
                        </div>
                    </a>
                </div>
                <div class="linkedin-button social-item ">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa-linkedin sc-icon"></span>
                            <span class="like-count">1</span> <span class="like-text"> Follower </span>
                        </div>
                    </a>
                </div>
                <div class="dribble-button social-item ">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa fa-dribbble sc-icon"></span> <span class="like-count">90</span>
                            <span class="like-text"> Followers </span>
                        </div>
                    </a>
                </div>
                <div class="gplus-like-button  social-item">
                    <a href="#" title="" target="_blank">
                        <div class="social-item-inner">
                            <span class="fa fa-google-plus sc-icon"></span> <span class="like-count">120</span>
                            <span class="like-text"> Followers </span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-9 column-15">
                <h6>Python基础</h6>

                <div class="accordation">
                    <div class="jb-accordion-wrapper wrapper_1">
                        <div class="jb-accordion-title title-grey"> {{ this_question.id }}.{{ this_question.question_content }}

                        </div>
                        <p><!-- /.accordion-title -->
                        </p>
                        <div id="accordion-1-" class="jb-accordion-content collapse in" style="height: auto;">
                            <div class="list-group" class="choices" id="choices">
                                <a href="#" class="list-group-item" style="color: black;" onclick="return false">A.{{ this_question.choiceA }}</a>
                                <a href="#" class="list-group-item" style="color: black;" onclick="return false">B.{{ this_question.choiceB }}</a>
                                <a href="#" class="list-group-item" style="color: black;"
                                   onclick="return false">C.{{ this_question.choiceC }}</a>
                                <a href="#" class="list-group-item" style="color: black;"
                                   onclick="return false">D.{{ this_question.choiceD }}</a>
                            </div>
                        </div>
                        <p><!-- /.collapse --></p>
                    </div>

                </div>

                <div style="color:#F00" id="show_detail"></div>


                <div class="row" style="margin-top: 80px;">
                    {% if is_last %}
                    <div class="col-md-4 col-md-offset-9">
                        <a href="#" class="add_btn more_btn submit" id="submit" onclick="return false">交&nbsp;&nbsp;卷</a>
                    </div>
                    {% else %}
                    <div class="col-md-4 col-md-offset-9">
                        <a href="#" class="add_btn more_btn next" id="next" onclick="return false">下一题</a>
                    </div>
                    {% endif %}
                </div>
                <div class="row" style="margin-top: 50px;">
                    <div class="col-md-12">
                        <div class="alert alert_1" role="alert"
                             style=" color: #ffffff; border-color: #a3da36; background-color: #a3da36;">
                            <i class="fa fa-bell"></i>
                            恭喜！你已经闯关成功！你可以开始下一关。
                        </div>
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>
    </div>
{% endblock %}
{% block custom_js %}
    <script>
        $(function () {
            //  选择某个选项
            $("#choices a").on("click", function () {
                $(this).addClass('choose').siblings().removeClass('choose');
            });

            //  点击交卷
            $("#submit").on("click", function () {
                //  num是选择的答案的序号
                var num = $(".choose").index();
                var cur_question_num = {{ this_question.id }};
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'course:next_question' %}",
                    data: {
                        'user_answer': num,
                        'practice_num': cur_question_num
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        alert({{ course_id }});
                        if (data.status == 'success')
                            window.location.href = "{% url 'course:practice_result' course_id lesson_id %}";
                        else
                            $("#show_detail").text('请选择一个答案')
                    }
                })
            });

            //  点击下一题
            $("#next").on("click", function () {
                //  num是选择的答案的序号
                var num = $(".choose").index();
                var cur_question_num = {{ this_question.id }};
                console.log(cur_question_num);
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'course:next_question' %}",
                    data: {
                        'user_answer': num,
                        'practice_num': cur_question_num
                    },
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {

                        if (data.status == 'success')
                            window.location.href = "{% url 'course:choice_question' course_id lesson_id this_question.id|add:1 %}";
                        else
                            $("#show_detail").text('请选择一个答案')
                    }
                })

            });

        })

    </script>
{% endblock %}
